<template>
  <BasicModal v-bind="$attrs" title="订单详情" :helpMessage="['订单详情']" :width="modalWidth" :footer="null" @register="registerModal" :destroyOnClose="true">
    <Description size="middle" class="mt-4" title="基本信息" :bordered="false" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="orderInfo.data" :schema="orderInfoSchema" v-if="orderInfo.data" />
    <BasicTable @register="registerOrderDetailPerSonTable"></BasicTable>
    <BasicTable @register="registerOrderDetailTable"></BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { h, reactive, ref, unref } from 'vue';
import { render } from '@apps/antd-admin/src/hooks/render/renderUtils';
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { DescItem, Description } from '@apps/antd-admin/src/components/description';
import { BasicColumn, BasicTable, useTable } from '@apps/antd-admin/src/components/table';
import { getButlerServiceOrderDetail } from '../data/api';
import { Tag } from 'ant-design-vue';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';

const { getIsMobile } = useAppInject();
const modalWidth = ref('750px');
if (unref(getIsMobile)) {
  modalWidth.value = '80%';
}
let orderInfo: Recordable = reactive({ data: {} });
const orderStatusTagRender = (color: string) => curVal => {
  const orderStatusArray = [
    { label: '待付款', value: '1' },
    { label: '已付款', value: '2' },
    { label: '已退款', value: '3' },
    { label: '申请退款中', value: '4' },
    { label: '已关闭', value: '5' },
  ];
  const orderStatus: any = orderStatusArray.find(item => item.value == curVal);
  if (orderStatus) {
    return h(Tag, { color }, () => orderStatus.label);
  }
  return '';
};
const serviceStateTagRender = (color: string) => curVal => {
  const serviceStateArray = [
    { label: '无需接单', value: '-1' },
    { label: '待接单', value: '0' },
    { label: '已接单', value: '1' },
    { label: '已退单', value: '2' },
    { label: '服务中', value: '3' },
    { label: '已完成', value: '4' },
  ];
  const serviceState: any = serviceStateArray.find(item => item.value == curVal);
  if (serviceState) {
    return h(Tag, { color }, () => serviceState.label);
  }
  return '';
};
const payTypeTagRender = (color: string) => curVal => {
  const payTypeArray = [
    { label: '迅联微信', value: 'PAY_WX' },
    { label: '易宝微信', value: 'PAY_WX_YIBAO' },
    { label: '银联微信', value: 'PAY_WX_YINLIAN' },
    { label: '农业银行微信', value: 'PAY_WX_NONGYE' },
    { label: '富友微信', value: 'PAY_WX_FUIOU' },
    { label: '富友微信小程序', value: 'PAY_WX_FUIOU_MINI' },
    { label: '交通银行微信', value: 'PAY_WX_JIAOTONG' },
    { label: '线下', value: 'PAY_UNDERLINE' },
    { label: '公司余额', value: 'PAY_COMPANY_BALANCE' },
    { label: '扫码支付', value: 'PAY_QRCODE' },
    { label: '余额支付', value: 'PAY_BALANCE' },
  ];
  const payType: any = payTypeArray.find(item => item.value == curVal);
  if (payType) {
    return h(Tag, { color }, () => payType.label);
    return payType.label;
  }
  return '';
};
const orderInfoSchema: DescItem[] = [
  {
    field: 'orderNo',
    label: '订单编号',
    span: 3,
  },
  {
    field: 'mobile',
    label: '用户手机号',
    span: 3,
  },
  {
    field: 'userName',
    label: '用户姓名',
    span: 3,
  },
  {
    field: 'orderStatus',
    label: '订单状态',
    span: 3,
    render: orderStatusTagRender('blue'),
  },
  {
    field: 'serviceState',
    label: '服务状态',
    span: 3,
    render: serviceStateTagRender('red'),
  },
  {
    field: 'totalPrice',
    label: '订单总金额',
    span: 3,
  },
  {
    field: 'payType',
    label: '支付类型',
    span: 3,
    render: payTypeTagRender('green'),
  },
  {
    field: 'employeeName',
    label: '服务销售',
    span: 3,
  },
  {
    field: 'dispatchTime',
    label: '接单时间',
    span: 8,
  },
  {
    field: 'startServiceTime',
    label: '开始时间',
    span: 8,
  },
  {
    field: 'endServiceTime',
    label: '完成时间',
    span: 8,
  },
  {
    field: 'remark',
    label: '备注',
    span: 10,
  },
];
const orderDetailTableSchema: BasicColumn[] = [
  {
    title: '商品名称',
    width: 150,
    dataIndex: 'goodsName',
  },
  {
    title: '商品图片',
    width: 60,
    dataIndex: 'coverImg',
    customRender: render.renderImage,
  },
  {
    title: '金额',
    width: 150,
    dataIndex: 'unitPrice',
  },
  {
    title: '数量',
    width: 150,
    dataIndex: 'buyNum',
  },
];
const [registerOrderDetailTable, { setTableData: setOrderDetailTable }] = useTable({
  title: '订单明细',
  columns: orderDetailTableSchema,
  pagination: false,
  showIndexColumn: false,
  showSummary: false,
  scroll: { y: 300 },
  inset: true,
  isCanResizeParent: false,
});

const orderDetailPersonTableSchema: BasicColumn[] = [
  {
    title: '姓名',
    width: 150,
    dataIndex: 'userName',
  },
  {
    title: '证件号',
    width: 150,
    dataIndex: 'identityNo',
  },
];
const [registerOrderDetailPerSonTable, { setTableData: setPerSonTable }] = useTable({
  title: '服务人明细',
  columns: orderDetailPersonTableSchema,
  pagination: false,
  showIndexColumn: false,
  showSummary: false,
  scroll: { y: 300 },
  inset: true,
  isCanResizeParent: false,
});

const [registerModal, { setModalProps }] = useModalInner(async data => {
  let record = data.record;
  getButlerServiceOrderDetail({
    butlerServiceOrderId: record.butlerServiceOrderId,
    handlerName: 'busButlerServiceOrderDetailHandler',
  }).then(result => {
    console.info(result);
    orderInfo.data = result;
    setOrderDetailTable(result.orderDetailList);
    setPerSonTable(result.personList);
  });
});
</script>
